<template>
  <el-card shadow="never">
      <template #header>
          <div class="card-header">
              <span>商品</span>
          </div>
      </template>
      <el-row :gutter='10'>
          <el-col :span="4">
              <el-input placeholder="请输入商品名" v-model="searchContent"></el-input>
          </el-col>
          <el-col :span="4">
              <el-button type='primary' @click="handleSearch">搜索</el-button>
              <el-button type='primary' @click="addGoodsInfo">添加</el-button>
          </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="600">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template #default="scope">
            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
            <el-button  type="text" size="small">查看</el-button>
            <el-button @click="handleEditor(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="changePage"
        >
        
      </el-pagination>
   </el-card>

    

   <AddProduct  v-if="dialogVisible === true" @onCloseDialog='closeDialogVisible'></AddProduct>

   <EditProduct v-if="editDialogVisible === true" :row="row" @onCloseEditDialog='closeEditDialog'></EditProduct>
</template>

<script>
import {onMounted, reactive, toRefs } from 'vue';
import AddProduct from '../components/AddProduct.vue';
import {ElMessageBox, ElNotification} from 'element-plus';
import EditProduct from '../components/EditProduct.vue';
function loadData(data){
  data.push(
   {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }
        );
        return data;
};

function useEdit(state){
  const handleEditor=(row)=>{
      state.editDialogVisible= true;
      state.row = row;
      console.log(row);
  };
  return {
    handleEditor
  }
}

function useHandleSearch(state){
  const handleSearch = ()=>{
    
     
      state.currentPage=1;
      const params = {
        pageNumber: state.currentPage,
        pageSize:state.pageSize,
        search: state.searchContent
      };
       console.log("axios to search backend service");
       //if success
       state.tableData=[{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄 search',
          zip: 200333
        }];
      state.total=1;
  };
  return {
    handleSearch
  }

}

function useDelete(){
  const handleDelete=(row)=>{
     console.log(row.date);
     ElMessageBox.confirm("are your sure to delete", "提示",{
       confirmButtonText: "sure",
       cancelButtonText: "cancel",
       type: "warning",
      // 确定与删除都会调用该函数
       callback:(action)=>{
         if(action === 'confirm'){
           console.log("use axios to delete data");
           ElNotification({
             title:"success",
             message:"delete success",
             type:"success",
             duration:2000,
           })
         }
       }
     });
  };
  return {
    handleDelete
  }
};

export default {
    components:{
            AddProduct,
            EditProduct
    },

    setup(){
        
          const state = reactive({
              row:{},
              tableData:[],
              dialogVisible: false,
              editDialogVisible:false,
              searchContent:'',
              total:5,
              currentPage:1,
              pageSize:3});

          onMounted(()=>{loadData(state.tableData)});
          
          const changePage=(val)=>{
             state.currentPage=val;
             console.log('use axios get current page data, page: ' + val);
             loadData(state.tableData);
          };

          const addGoodsInfo= function(){
              state.dialogVisible = true;
          };

          const closeEditDialog = (visible, oneGoods) =>{
            state.editDialogVisible = visible;
            if(oneGoods != undefined)
              {
                //如果是真实数据可以添加到state.tableData中，页面会自动刷新
                console.log('at goods list page' + oneGoods);
              }
          }
          const closeDialogVisible= (visible, oneGoods)=>{
              state.dialogVisible = visible;
              if(oneGoods != undefined)
              {
                //如果是真实数据可以添加到state.tableData中，页面会自动刷新
                console.log('at goods list page' + oneGoods);
              }
          };

          return{
              ...toRefs(state),
              addGoodsInfo,
              closeDialogVisible,
              closeEditDialog,
              ...useDelete(),
              changePage,
              ...useEdit(state),
              ...useHandleSearch(state),
          }
    }
  
}
</script>

<style>
.el-table__header tr,
.el-table__header th {
    padding: 2;
    height: 30px;
    line-height: 30px;
}
.el-table__body tr,
.el-table__body td {
    padding: 1;
    height: 30px;
    line-height: 30px;
}
</style>